<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   
</head>

<body>
    <div id="app">
       请输入您的用户名： <input type="text" :value="rbacManager.username" @input="inputUserName" />
       请输入您的密码： <input type="password" :value="rbacManager.password" @input="inputPassword"/>
       <br>
       {{rbacManager.username}} ---{{rbacManager.password}}
       <hr>
       使用v-model绑定用户名：<input type="text" v-model="rbacManager.username">
       <hr>
       <h1>绑定多行文本</h1>
       <textarea v-model="textarea" cols="30" rows="10"></textarea>
       {{textarea}}
       <hr>
       <h1>绑定复选框</h1>
       爱好：
       <ul>
           <li v-for="item in hobbies">
               <!-- value前面加冒号，表示动态绑定，后面的值是一个表达式 -->
            <input type="checkbox" :value="item"  id="item.id" v-model="rbacManager.hobby">
            <label for="item.id">{{item.name}}</label>
           </li>
       </ul>
       {{rbacManager}}
       <hr>
       <h1>绑定单选按钮</h1>
       <ul>
           <li v-for="item in sex">
                <input type="radio" :value="item" v-model="rbacManager.sex">{{item.name}}
           </li>
       </ul>
       传入后端的json数据：{{rbacManager}}
       <hr>
       <h1>绑定下拉列表</h1>
       <select v-model="rbacManager.mingzu">
            <option disabled value="">请选择</option>
            <option v-for="item in allmingzu" :value="item">
                {{item.name}}
            </option>
       </select>
    </div>
    <script>
        const vm = new Vue({
            //绑定到上面view页面中的dom节点，该节点内部就可以使用vue的组件
           el:"#app", 
           data() {
               return {
                //    这个data中的值，最终会通过ajax，发送到后台，所以，我们页面中值改变，这里必须变！
                    rbacManager:{
                        username:"root",
                        password:"123456",
                        hobby:[],
                        sex:0,
                        mingzu:""
                    },
                    textarea:`
                        我是一个多行文本，我骄傲；
                        我有很多东西，我志豪。
                    `,
                    hobbies:[
                        {id:0,name:"篮球"},
                        {id:1,name:"足球"},
                        {id:2,name:"乒乓球"},
                        {id:3,name:"台球"},
                        {id:4,name:"保龄球"},
                    ],
                    //动态性别获取
                    sex:[
                        {id:0,name:"女"},
                        {id:1,name:"男"},
                        {id:2,name:"其他"},
                    ],
                    allmingzu:[
                        {id:1,name:"汉族"},
                        {id:2,name:"朝鲜族"},
                        {id:3,name:"白族"},
                        {id:4,name:"回族"},
                        {id:5,name:"藏族"},
                        {id:6,name:"羌族"},
                    ]
               }
           },
           methods: {
            inputUserName(e){
                console.log(e.target.value);
                this.rbacManager.username = e.target.value
            },
            inputPassword(e){
                console.log(e.target.value);
                this.rbacManager.password = e.target.value
            }
           },
        });
    </script>
</body>

</html>